import React from "react";

export default class Input extends React.Component {
  state = {
    value: "",
  };

  inputRef = React.createRef();

  componentDidMount() {
    console.log(this.inputRef);
  }

    onInputFocus = () => {
    this.setState({
      value: "默认的初始值",
    });
  };

  onInputChange = (event) => {
    console.log(event.target.value);
    this.setState({
      value: event.target.value,
    });
  };

  render() {
    // 解构赋值
    const { value } = this.state;
    return (
      <>
        <h2>{value}</h2>
        <input
          // 绑定事件
          onFocus={this.onInputFocus}
          onChange={this.onInputChange}
          value={value}
        />
        {/* <Hello ref={this.inputRef} /> */}
      </>
    );
  }
}
